<template>
  <div class="pad-content-box form-no-padding-box padding-top-20">
    <el-form label-width="100px" size="small" :model="searchParams">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="客户名称">
            <el-select v-model="searchParams.customerInfoKeys" 	 clearable filterable  @change="changeCustomer">
              <el-option v-for="item in clientList" :key="item.primaryKey" :label="item.partnerName" :value="item.primaryKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同编号">
              <el-select v-model="searchParams.contractKeys"  clearable filterable @change="changeContract" :collapse-tags="true">
                <el-option v-for="item in contractList"  :key="item.primaryKey" :label="item.contractName" :value="item.primaryKey" />
              </el-select>
            </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="资产名称">
            <el-select v-model="searchParams.rentCycleKeys"  clearable filterable :collapse-tags="true">
              <el-option v-for="item in assetList" :key="item.primaryKey" :label="item.assetName" :value="item.primaryKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="费项名称">
            <el-select v-model="searchParams.rechargeTypeList"  clearable filterable>
              <el-option v-for="item in chargeList" :key="item.key" :label="item.value" :value="item.key" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-col :span="24">
        <el-button type="primary" size="small" class="f-right" @click="getSaleReportList()">查询</el-button>
        <el-button type="primary" size="small"  class="f-right margin-right-10" @click="record">录入表数</el-button>
        <el-button type="primary" size="small"  class="f-right" @click="recharge">预充值</el-button>
        <el-button type="primary" size="small"   class="f-right" @click="out()">Excel导出</el-button>
      </el-col>
    </el-form>
    <el-table class=" has-tab-header-border new-table-style" :border="true" :data="tableData" ref="multipleTable" align="center" @select-all="onSelectAll" @selection-change="handleSelectionChange">
      <el-table-column prop="fundsDesc" type="selection" width="60"></el-table-column>
      <el-table-column label="合同编号" prop="contractCode" align="center" width="200"></el-table-column>
      <el-table-column label="客户" prop="customerInfoName" align="center" width="200"></el-table-column>
      <el-table-column label="资产名称" prop="rentCycleName" align="center"></el-table-column>
      <el-table-column label="费项名称" prop="rechargeTypeName" align="center"></el-table-column>
      <el-table-column label="预收金额" prop="totalRechargeAmount" align="center"></el-table-column>
      <el-table-column label="录入表数" prop="tableValue"></el-table-column>
      <el-table-column  label="抄表时间" prop="tableTime" align="center" width="200"> 
        <template slot-scope="scope">
          <span>{{ scope.row.tableTime | formatDateTime('YYYY-MM-DD HH:mm') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="剩余金额" prop="totalSurplusAmount" align="center"></el-table-column>
    </el-table>
    <Pagination v-if="total" @change="pageChange" :total="total" paginationLayout="total, prev, pager, next"/>
    <el-dialog :visible.sync="showAddDialog" title="预充值" width="90%" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="handleClose">
      <addPreCharge @closeDialog="closeDialog" ref="saleReportAdd" :actualIncomePaymentMethod="actualIncomePaymentMethod" :chargeList="chargeList" :clientList="clientList" ></addPreCharge>
    </el-dialog>
    <el-dialog :visible.sync="showRecord" title="录入表数" width="60%" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="handleClose">
      <entryNumber @closeDialog="closeDialog" ref="saleReportAdd" :accountRechargeKey="accountRechargeKey"></entryNumber>
    </el-dialog>
  </div>
</template>

<script>
  import { apiClientList,apiContractByClient,apiAssetList,rechargeList,rechargeExport} from '../../api/preCharge';
  import addPreCharge from './components/addPreCharge.vue';
  import entryNumber from './components/entryNumber.vue';
  import { apiPactConstant } from '@a/index';
  export default {
    name: 'salesReport',
    components:{addPreCharge,entryNumber},
    data() {
      return {
        searchParams:{},
        tableData:[],
        currentPage: 1,
        pageSize: 10,
        total:0,
        showRecord:false,
        showAddDialog:false,
        projectKey:localStorage.getItem("projectKey"),
        clientList:[],
        chargeList:[],
        contractList:[],
        assetList:[],
        multipleTable:[],
        actualIncomePaymentMethod:[],
        accountRechargeKey:''
      };
    },
    created() {
      this.getClientList()
      this.getConstant()
      this.getSaleReportList()
    },
    methods: {
      //选择客户数据源
      async getClientList() {
        let res = await apiClientList();
        this.clientList = res.rows || []
      },
      //常量
      async getConstant() {
        let res = await apiPactConstant();
        this.chargeList = res.billTypeEnergy || [];
        this.actualIncomePaymentMethod = res.actualIncomePaymentMethod ||[]
      },
      //选择客户
      changeCustomer(val){
        this.getContractList(val)
      },
      //选择合同
      changeContract(val){
        this.getChargeItemList(val)
      },
      //合同
      async getContractList(customerKey) {
        let res = await apiContractByClient({
          partnerKey: customerKey,
        });
        this.contractList = res.rows || [];
      },
      //资产 事项 assetType 空的代表是事项 不为空代表是资产
      async getChargeItemList(contractCode) {
        let assetList = [];
        let res = await apiAssetList({ contractCode: contractCode, status: 2 });
        res.rows.forEach(item => {
          if (item.assetType) {
            assetList.push(item);
          }
        });
        this.assetList = assetList;
      },
      handleSelectionChange(rows){
        if (rows.length > 1) {
          const newRows = rows.filter((it, index) => {
            if (index == rows.length - 1) {
              this.$refs.multipleTable.toggleRowSelection(it, true);
              return true;
            } else {
              this.$refs.multipleTable.toggleRowSelection(it, false);
              return false;
            }
          });
        }
        this.multipleTable = rows
        if(this.multipleTable.length>0){
          this.accountRechargeKey = this.multipleTable[0].primaryKey
        }else{
          this.accountRechargeKey = ''
        }
      },
      onSelectAll() {
        this.$refs.multipleTable.clearSelection();
      },
      async getSaleReportList(more){
        let res = await rechargeList({
          currentPage: more ? this.currentPage : 1,
          pageSize: this.pageSize,
          projectKeys:[localStorage.getItem('projectKey')],
          customerInfoKeys:this.searchParams.customerInfoKeys?[this.searchParams.customerInfoKeys]:null,
          contractKeys:this.searchParams.contractKeys?[this.searchParams.contractKeys]:null,
          rentCycleKeys:this.searchParams.rentCycleKeys?[this.searchParams.rentCycleKeys]:null,
          rechargeTypeList:this.searchParams.rechargeTypeList?[this.searchParams.rechargeTypeList]:null
        });
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },
      //分页
      pageChange(page) {
        this.currentPage = page.currentPage
        this.getSaleReportList('more');
      },
      recharge(){
        this.showAddDialog = true
      },
      record(){
        if(this.multipleTable.length==0){
          this.$message.error('请选择列表')
          return
        }
         this.showRecord = true
      },
      closeDialog(data){
        this.showAddDialog = false
        this.showRecord = false
        if(data.success){
          this.getSaleReportList()
          this.multipleTable = []
        }
      },
       //导出
      async out() {
        let res = await rechargeExport({
          projectKeys:[localStorage.getItem('projectKey')],
          customerInfoKeys:this.searchParams.customerInfoKeys?[this.searchParams.customerInfoKeys]:null,
          contractKeys:this.searchParams.contractKeys?[this.searchParams.contractKeys]:null,
          rentCycleKeys:this.searchParams.rentCycleKeys?[this.searchParams.rentCycleKeys]:null,
          rechargeTypeList:this.searchParams.rechargeTypeList?[this.searchParams.rechargeTypeList]:null
        })
        window.location.href = res.url
      },
      handleClose(){
        this.$refs.saleReportAdd.closeDialog({success:false})
      }
    },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .has-tab-header-border .el-tabs__header {
    border: none;
  }
  ::v-deep .cell{
    text-align: center;
  }
</style>
